<template>
  <view class="content">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain>
      <up-image :show-loading="true" :src="detail.headImage" width="148rpx" height="148rpx" shape="circle"></up-image>
    </button>
    <up-form :model="detail" ref="form1" labelPosition="left">
      <up-form-item label="昵称" prop="nickName" borderBottom ref="item1" labelWidth="180">
        <up-input v-model="detail.nickName" border="none" type="nickname" placeholder="请输入昵称"></up-input>
      </up-form-item>
      <up-form-item label="手机号" prop="phone" borderBottom ref="item2" labelWidth="180">
        <up-input v-model="detail.phone" border="none" placeholder="请输入您的手机号"></up-input>
      </up-form-item>
      <up-form-item label="邮箱" prop="email" borderBottom ref="item4" labelWidth="180">
        <up-input v-model="detail.email" border="none" placeholder="请输入您的邮箱"></up-input>
      </up-form-item>
    </up-form>
    <view class="bottomWrap">
      <up-button type="primary" text="保存修改" @click="saveInfo"></up-button>
    </view>
  </view>
</template>

<script>
import { getInfo, editUser } from '@/services/user';
import { uploadFile } from '@/services/uploadFile';

export default {
  onLoad() {
    const _that = this;
    getInfo().then((res) => {
      const { success, data } = res || {};
      if (success) {
        const { nickName = '', headImage = '', phone = '', email='' } = data || {};
        _that.detail = {
          nickName,
          headImage,
          phone,
          email
        }
      }
    });
  },
  data() {
    return {
      isEdit: false,
      timer: 0,
      detail: {
        headImage: '',
        nickName: '',
        phone: '',
        email: '',
      },
      rules: {
        'phone': [
          {
            validator: (rule, value, callback) => {
              if (!value) return true;
              // @ts-ignore
              return uni.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          }
        ],
        'email': [
          {
            validator: (rule, value, callback) => {
               if (!value) return true;
              // @ts-ignore
              return uni.$u.test.email(value);
            },
            message: '邮箱不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          }
        ],
      },
    };
  },
  onShow() {
    this.$refs.form1.setRules(this.rules);
  },
  beforeUnmount() {
    this.timer && clearTimeout(this.timer);
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.detail.headImage = avatarUrl;
      this.isEdit = true;
    },
    async saveInfo() {
      const { isEdit } = this;
      const _that = this;
      if (isEdit) {
        const { headImage } = this.detail;
        await uploadFile(headImage).then((res) => {
          console.log('headImage', res)
          const {url} = res || {};
          _that.detail.headImage = url;
        }).catch(() => {
          uni.$u.toast('图片上传失败');
        });
      }
      const { detail } = _that;
      editUser(detail).then((res) => {
        if (res.success) {
          getInfo().then(() => {
            const { success, data } = res || {};
            if (success) {
              _that.$store.commit('changeState', {
                userInfo: data,
              })
            }
          })
          uni.$u.toast('修改成功');
        } else {
          uni.$u.toast('修改失败');
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 30rpx;
}
.avatar-wrapper{
  margin: 0 0 30px;
  border-radius: 50%;
  padding: 0;
  height: 148rpx;
}
.bottomWrap{
  margin: 108rpx 30rpx 0;
  width: calc(100% - 60rpx)
}
button[plain] {
  border: 0;
}
</style>
